import React from 'react';
import Alert from '@material-ui/lab/Alert';
import Avatar from '@material-ui/core/Avatar';
import Grid from '@material-ui/core/Grid';
import clsx from 'clsx';
import { Card } from '@material-ui/core';
import { g_style } from '../base/st';
import { makeStyles } from '@material-ui/core/styles';
import { obj_str, cut_text } from 'sui';

const useGlobStyle = makeStyles(theme => (g_style));

const CardBox = ({ children }) => <Grid container spacing={2}  justifyContent="flex-start">{children}</Grid>;

const CItemBase = ({ children, lg=true, cl="blue", minw=280 }) => {
    const classes = useGlobStyle();

    return (
        <Grid lg={lg} item>
            <Card className={clsx(classes.root, classes[cl])} style={{ minWidth: minw }}>
                {children}
            </Card>
        </Grid>
    );
};

/* lg: the number of grids the component is going to use. It's applied for the lg breakpoint and wider screens
*/
const CItem = ({ tag, title, subtitle, uid, lg=true, cl="blue", children, tipleft, pos, cont }) => {
    const classes = useGlobStyle();

    const Tag = () => {
        if (!tag) {
            return null;
        }

        return (
            <div>
                <div className={`mr-4 text-base pt-1 px-2 pb-2 bg-${cl}-300`}>{tag}</div>
            </div>
        );
    };

    const SubTitle = () => {
        if (!subtitle) {
            return null;
        }

        return <div className="mx-4 mt-2 text-base flex flex-wrap">{subtitle}</div>;
    };

    const PosTitle = () => {
        if (pos) {
            return (
                <div className="flex justify-between">
                    <div className="inline-flex items-center">
                        <Avatar className={classes.blueAvatar}>{pos}</Avatar>
                        <div>
                            <div className="mx-4 mt-2 text-lg">{title}</div>
                            <SubTitle/>
                        </div>
                    </div>
                    <Tag/>
                </div>
            );
        }

        return (
            <div className="flex justify-between">
                <div>
                    <div className="mx-4 mt-2 text-lg">{title}</div>
                    <SubTitle/>
                </div>
                <Tag/>
            </div>
        );
    };

    return (
        <CItemBase lg={lg} cl={cl}>
            <PosTitle/>
            {cont}
            <div className="flex justify-between">
                <div className="inline-flex justify-center items-center text-sm text-black ml-4">
                    {tipleft}
                </div>
                <div className="inline-flex items-center">
                    {children}
                </div>
            </div>
        </CItemBase>
    );
};

const ICard = ({ tag, data, title, subtitle, children, cl="blue", tipleft, cont}) => (
    <CItem
        uid={data.uid}
        title={title || obj_str(data, "name")}
        subtitle={subtitle || obj_str(data, "sn")}
        pos={data.pos}
        cl={cl}
        tipleft={tipleft}
        tag={tag}
        cont={cont}>
        {children}
    </CItem>
);

const VCard = ({ item }) => (
    <div className="mx-4 mt-3">
        <CardBox>
            {item}
        </CardBox>
    </div>
);

const CardView = ({ className, children }) => (
    <Card className={"mx-2 " + className}>
        {children}
    </Card>
);

const StaCard = ({ hmt, info, lg=true, tag, data, children, cl="blue", mt=false }) => {
    const classes = useGlobStyle();

    const Tag = () => {
        if (!tag) {
            return null;
        }

        return (
            <div>
                <div className={`mr-4 text-base pt-1 px-2 pb-2 bg-${cl}-300`}>{tag}</div>
            </div>
        );
    };

    const SubTitle = () => {
        const subtitle=data.sn;
        if (!subtitle) {
            return null;
        }

        return <div className="mx-4 mt-2 text-base flex flex-wrap">{subtitle}</div>;
    };

    const PosTitle = () => {
        const pos = data.pos;
        const title = data.name;
        if (pos) {
            return (
                <div className="flex justify-between">
                    <div className="inline-flex items-center">
                        <Avatar className={classes[`${cl}Avatar`]}>{pos}</Avatar>
                        <div>
                            <div className="mx-4 mt-2 text-lg">{title}</div>
                            <SubTitle/>
                        </div>
                    </div>
                    <Tag/>
                </div>
            );
        }

        return (
            <div>
                <div className="mx-4 mt-2 text-lg">{title}</div>
                <SubTitle/>
            </div>
        );
    };

    const InfoView = () => {
        if (!info) {
            return <div/>;
        }

        return <Alert severity="warning" className="my-2 ml-2">{cut_text(info, 12)}</Alert>;
    };

    return (
        <Grid lg={lg} item>
            <Card className={clsx(classes.large, classes[cl])}>
                <PosTitle/>
                <div className="flex justify-between">
                    <InfoView/>
                    <div className="inline-flex items-center">
                        {children}
                    </div>
                </div>
            </Card>
        </Grid>
    );
};

export {CItemBase, StaCard, CardView, VCard, ICard, CItem, CardBox};
